<template>
<div class="cardList">
    <av-page-header title="卡片列表">
        <div slot="breadcrumb">
            <a-breadcrumb>
                <a-breadcrumb-item>
                    <a >首页</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>
                    <a >列表页</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>卡片列表</a-breadcrumb-item>
            </a-breadcrumb>
        </div>
        <template slot="content">
            <div class="pageHeaderContent">
                <p>
                    段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，
                    提供跨越设计与开发的体验解决方案。
                </p>
                <div class="contentLink">
                    <a>
            <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />{{' '}}
            快速开始
          </a>
                    <a>
            <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />{{' '}}
            产品简介
          </a>
                    <a>
            <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />{{' '}}
            产品文档
          </a>
                </div>
            </div>
        </template>
        <div slot="extra" class="extraImg">
            <img
            alt="这是一个标题"
            src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png"
          />
      </div>
    </av-page-header>
    <a-list rowKey="id" :loading="loading" :grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }" :dataSource="['', ...list]">
        <!--
            renderItem={item =>
              item ? (
                <List.Item key={item.id}>
                  <Card hoverable className={styles.card} actions={[<a>操作一</a>, <a>操作二</a>]}>
                    <Card.Meta
                      avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
                      title={<a>{item.title}</a>}
                      description={
                        <Ellipsis className={styles.item} lines={3}>
                          {item.description}
                        </Ellipsis>
                      }
                    />
                  </Card>
                </List.Item>
              ) : (
                <List.Item>
                  <Button type="dashed" className={styles.newButton}>
                    <Icon type="plus" /> 新增产品
                  </Button>
                </List.Item>
              )
            }-->
        <template slot="renderItem" slot-scope="item, index">
            <a-list-item v-if="item==''">
                <a-button type="dashed" class="newButton">
                    <a-icon type="plus" /> 新增产品
                </a-button>
            </a-list-item>
            <a-list-item v-if="item!=''" :key="item.id">
                  <a-card hoverable class="card">
                    <template slot="actions">
                      <a>操作一</a> <a>操作二</a>
                    </template>
                    <a-card-meta>
                      <!--
                        
                      avatar={}
                      title={}
                      description={
                        <Ellipsis className={styles.item} lines={3}>
                          {item.description}
                        </Ellipsis>
                      }
                      -->
                      <img slot="avatar" alt="" class="cardAvatar" :src="item.avatar" />
                      <a slot="title">{{item.title}}</a>
                      <template  slot="description">
                        {{item.description}}
                      </template>
                    </a-card-meta>
                  </a-card>
            </a-list-item>
        </template>

    </a-list>
</div>
</template>

<script lang="ts">
import {
    Component,
    Prop,
    Vue,
} from 'vue-property-decorator';
import {
    State,
    Mutation,
    namespace,
} from 'vuex-class';

import moment from 'moment';
import axios from 'axios';

@Component({
    components: {},
})
export default class CardList extends Vue {

    private loading: boolean = false;

    private list: any[] = [];

    private mounted() {
        axios.get('/api/fake_list', {
            params: {
                count: 8,
            },
        }).then((res: any) => {
            this.list = res.data;
        });
    }

}
</script>

<style lang="less">
@import '../../assets/theme/styles/index.less';

.cardList {
    margin-bottom: -24px;

    .card {
        :global {
            .ant-card-meta-title {
                margin-bottom: 12px;

                &>a {
                    color: @heading-color;
                    display: inline-block;
                    max-width: 100%;
                }
            }

            .ant-card-actions {
                background: #f7f9fa;
            }

            .ant-card-body:hover {
                .ant-card-meta-title>a {
                    color: @primary-color;
                }
            }
        }
    }

    .item {
        height: 64px;
    }

    :global {
        .ant-list .ant-list-item-content-single {
            max-width: 100%;
        }
    }
}

.extraImg {
    margin-top: -60px;
    text-align: center;
    width: 195px;

    img {
        width: 100%;
    }
}

.newButton {
    background-color: #fff;
    border-color: @border-color-base;
    border-radius: @border-radius-sm;
    color: @text-color-secondary;
    width: 100%;
    height: 188px;
}

.cardAvatar {
    width: 48px;
    height: 48px;
    border-radius: 48px;
}

/*
.cardDescription {
    .textOverflowMulti();
}
*/

.pageHeaderContent {
    position: relative;
}

.contentLink {
    margin-top: 16px;

    a {
        margin-right: 32px;

        img {
            width: 24px;
        }
    }

    img {
        vertical-align: middle;
        margin-right: 8px;
    }
}

@media screen and (max-width: @screen-lg) {
    .contentLink {
        a {
            margin-right: 16px;
        }
    }
}

@media screen and (max-width: @screen-md) {
    .extraImg {
        display: none;
    }
}

@media screen and (max-width: @screen-sm) {
    .pageHeaderContent {
        padding-bottom: 30px;
    }

    .contentLink {
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 1000px;

        a {
            margin-right: 16px;
        }

        img {
            margin-right: 4px;
        }
    }
}
</style>
